<template>
	<a-layout style="min-height: 100vh">
		<a-layout-sider v-model:collapsed="collapsed" collapsible :width="170">
			<div class="logo"
				style="font-style: italic;text-align: center; font-size: 20px;color:#fff; margin: 10px 0;line-height: 50px;font-family: 'Times New Roman'">
				<span><a-switch v-model:checked="checked" /> DevOps</span>
			</div>
			<div class="logo" />
			<a-menu v-for="menu in menu_list" v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
				<a-menu-item v-if="menu.children.length===0" :key="menu.id">

					<router-link :to="menu.menu_url">
						<desktop-outlined />
						<span> {{ menu.title }}</span>
					</router-link>
				</a-menu-item>

				<a-sub-menu v-else :key="menu.id">
					<template #title>

						<span>
							<desktop-outlined />
							<span>{{ menu.title }}</span>
						</span>

					</template>
					<a-menu-item v-for="child_menu in menu.children" :key="child_menu.id">
						<router-link :to="child_menu.menu_url">{{ child_menu.title }}</router-link>
					</a-menu-item>
				</a-sub-menu>
			</a-menu>
		</a-layout-sider>

		<a-layout>
			<a-layout-header style="background: #fff; padding: 20px">
				<a-row type="flex" justify="start">
					<a href="/#/ssh"><img src="../../assets/terminal.jpeg" title="点击跳转到ssh终端连接界面" alt="" style="width: 38px; height: 30px; line-height: 1.5715; margin-bottom: 30px; margin-right: 250px; margin-left: 100px;"></a>
					<a-col :span="1" :offset="17">
						<a-breadcrumb>
							<a-button @click="logout" type="primary" class="logout">
								注销
							</a-button>
						</a-breadcrumb>
					</a-col>
				</a-row>
			</a-layout-header>

			<a-layout-content style="margin: 0 16px">
				<router-view></router-view>
			</a-layout-content>

			<a-layout-footer style="text-align: center">

			</a-layout-footer>
		</a-layout>
	</a-layout>

</template>
<script>
	import {DesktopOutlined,FileOutlined,PieChartOutlined,TeamOutlined,UserOutlined} from '@ant-design/icons-vue';
	import {defineComponent,ref} from 'vue';

	export default defineComponent({
		setup() {
			const checked = ref(true);
			return {
				checked,
			};
		},
		components: {
			PieChartOutlined,
			DesktopOutlined,
			UserOutlined,
			TeamOutlined,
			FileOutlined,
		},

		data() {
			return {
				collapsed: ref(false),
				selectedKeys: ref(['1']),
				menu_list: [{
						id: 1,
						icon: '',
						title: '仪表盘',
						tube: '',
						menu_url: '/main/showCenter',
						children: []
					},
					{
						id: 2,
						icon: 'mail',
						title: '主机管理',
						menu_url: '/main/host',
						children: []
					},
					{
						"id": 3,
						icon: 'bold',
						title: '批量任务',
						tube: '',
						menu_url: '/main/multi_exec',
						children: [
							{
								id: 10,
								icon: 'mail',
								title: '远程执行命令',
								'menu_url': '/main/multi_exec'
							},
							{
								id: 24,
								icon: 'mail',
								title: '脚本任务',
								'menu_url': '/main/multi_scripts_exec'
							},
							{
								id: 11,
								icon: 'mail',
								title: 'ansible任务',
								'menu_url': '/main/template_manage'
							},
							{
								id: 36,
								icon: 'mail',
								title: 'saltstack任务',
								'menu_url': '/main/template_manage'
							},
							{
								id: 23,
								icon: 'mail',
								title: '模版管理',
								'menu_url': '/main/template_manage'
							},
						]
					},
					{
						id: 5,
						icon: 'mail',
						title: '定时计划',
						tube: '',
						menu_url: '/main/crond',
						children: [],
					},
					{
						id: 31,
						icon: 'mail',
						title: '接口测试',
						tube: '',
						menu_url: '/main/interface',
						children: [],
					},
					{
						id: 4,
						icon: 'highlight',
						title: '代码发布',
						tube: '',
						menu_url: '/main/workbench',
						children: [
							{
								id: 12,
								title: '应用管理',
								menu_url: '/main/release'
							},
							{
								id: 13,
								title: '发布申请',
								menu_url: '/main/release'
							}
						]
					},
					{
						id: 6,
						icon: 'mail',
						title: '配置管理',
						tube: '',
						menu_url: '/main/workbench',
						children: [
							{
								id: 14,
								title: '环境管理',
								'menu_url': '/main/environment'
							},
							{
								id: 15,
								title: '服务配置',
								'menu_url': '/main/workbench'
							},
							{
								id: 16,
								title: '应用配置',
								'menu_url': '/main/workbench'
							}
						]
					},
					{
						id: 7,
						icon: 'mail',
						title: '监控预警',
						tube: '',
						menu_url: '/main/workbench',
						children: []
					},
					{
						id: 8,
						icon: 'mail',
						title: '报警',
						tube: '',
						menu_url: '/main/workbench',
						children: [
							{
								id: 17,
								title: '报警历史',
								'menu_url': '/main/workbench'
							},
							{
								id: 18,
								title: '报警联系人',
								'menu_url': '/main/workbench'
							},
							{
								id: 19,
								title: '报警联系组',
								'menu_url': '/main/workbench'
							}
						]
					},
					{
						id: 9,
						icon: 'mail',
						title: '用户管理',
						tube: '',
						menu_url: '/main/workbench',
						children: [
							{
								id: 35,
								title: '登录日志',
								tube: '',
								menu_url: '/main/userloginrecord'
							},
							{
								id: 20,
								title: '账户管理',
								tube: '',
								menu_url: '/main/workbench'
							},
							{
								id: 21,
								title: '角色管理',
								tube: '',
								menu_url: '/main/workbench'
							},
							{
								id: 22,
								title: '系统设置',
								tube: '',
								menu_url: '/main/workbench'
							},
						]
					},
					{
						id: 10,
						icon: 'mail',
						title: '工单管理',
						tube: '',
						menu_url: '/main/workbench',
						children: [
							{
								id: 20,
								title: '工单记录',
								tube: '',
								menu_url: '/main/workbench'
							},
						]
					}
				]
			};
		},

		methods: {
			logout() {
				let self = this;
				this.$confirm({
					title: '系统提示',
					content: '您确认要注销登陆吗？',
					okText: '确定注销',
					cancelText: '取消注销',
					onOk() {
						self.$store.commit('setToken', '')
						self.$router.push('/login')
					}
				})
			},
		},
		

	});
</script>

<style>
	#components-layout-demo-side .logo {
		height: 32px;
		margin: 16px;
	}

	.site-layout .site-layout-background {
		background: #fff;
	}

	[data-theme='dark'] .site-layout .site-layout-background {
		background: #fff;
	}

	.logout {
		line-height: 1.5715;
	}
	
	
</style>